<template>
	<view class="order-card" @tap.stop="toDetail">
		<view v-if="order.isOpen" class="mask" @tap.stop="toMask(order)"></view>
		<view class="header">
			<view class="num" @tap.stop="onShop(order.shop_id)"> 订单编号：{{ order.order_no }} </view>
			<view class="state-del">
				<view class="state" :style="{ color: order.stateTipColor }">{{ order.stateTip }} </view>
				<!-- <text v-if="order.state == 9" class="margin-left-sm wlIcon-lajitong" @tap.stop="deleteOrder(order.id)"></text> -->
				<text v-if="order.state == 9" class="margin-left-sm wlIcon-lajitong" @tap.stop="showModal('确认删除',order.id)"></text>
			</view>
		</view>
		<view v-for="(goods, gkey) in order.goods" :key="goods.id" class="product-serve">
			<view class="img-info">
				<view class="img" :style="{
          backgroundImage:
            'url(' + $wanlshop.oss(goods.image, 70, 70) + ')',
        }">
				</view>
				<view class="info">
					<view class="title-pice">
						<view class="title">{{ goods.title }}</view>
						<view class="pice text-price red-font">{{ goods.price }}</view>
					</view>
					<view class="dis-unit">
						<view class="dis">{{ goods.difference }}</view>
						<view class="unit">x{{ goods.number }}</view>
					</view>
					<view class="tabs-use" style="display: flex;">
						<scroll-view scroll-x="true" style="flex: 1; display: flex; align-items: center;padding-right: 4rpx;">
							<view class="tags" v-if="goods.store && goods.store.tag">
								<view class="tag"
									v-for="(child, key) in (goods.store && goods.store.tag ? goods.store.tag : '').split(',')" :key="key">
									{{ child }}</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="img-info flex" v-if="goods.store_service">
				<view class="img">
					<image :src="$wanlshop.oss((goods.store_service.show_image), 70, 70)" />
				</view>
				<view class="info">
					<view class="title-pice">
						<view class="title">{{ goods.store_service.name }}</view>
						<view class="pice text-price red-font">{{ goods.store_service.unit_price }}</view>
					</view>
					<view class="dis-unit">
						<view class="dis">{{ goods.store_service.desc }}</view>
						<view class="unit">x{{ goods.store_service.quantity }}</view>
					</view>
					<view class="flex flex-end" v-if="order.state != 1">
						<view v-if="goods.service_status == 1" class="use" @tap.stop="use(order)">立即使用</view>
						<view v-if="goods.service_status == 2" class="use" @tap.stop="use(order)">已预约</view>
						<view v-if="goods.service_status == 3" class="use" @tap.stop="toEvaluate(order.id,'service',goods.id)">评价服务</view>
						<view v-if="goods.service_status == 4" class="use" @tap.stop>已取消</view>
						<view v-if="goods.service_status == 5" class="use" @tap.stop>已完成</view>
					</view>
				</view>
			</view>
			<view class="img-info" v-if="goods.store_staff">
				<view class="img">
					<image :src="$wanlshop.oss((goods.store_staff.avatar_img), 70, 70)" />
				</view>
				<view class="info">
					<view class="title-pice">
						<view class="title">{{ goods.store_staff.name }}</view>
						<view class="pice"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 倒计时 -->
		<view class="tips" v-if="order.state == 1">
			<view style="display: flex; align-items: center; font-size: 24rpx;">
				<image class="dfh_img" src="../../static/images/user/dfk.png" mode="widthFix"></image>
				<text>还剩</text>
				<uni-countdown :showHour="false" :show-day="false" :hour="0" color="#FF4646"
					:minute="Math.floor((order.createtime*1000 + 15 * 60 * 1000 - new Date().getTime()) / 1000 / 60)"
					:second="Math.floor(((order.createtime*1000 + 15 * 60 * 1000 - new Date().getTime()) / 1000) % 60)" />
				<text>分订单自动取消</text>
			</view>
		</view>
		<view class="tips" style="color: #3d3d3d;font-size: 26rpx;" v-if="order.state == 7 || cancel">
			订单已取消
		</view>

		<!-- 待发货 -->
		<view class="tips" v-if="order.state == 2 && order.pre_delivertime">
			<image class="dfh_img" src="../../static/images/user/dfh.png" mode="aspectFill"></image>
			<view class="info">
				<text class="title">待发货</text>
				<!-- <text class="gray-font">{{ order.pre_delivertime }}</text> -->
				<text class="gray-font">{{ pre_time(order.pre_delivertime) }}</text>
				<text class="gray-font" style="margin-left: 4rpx;">前发货</text>
			</view>
		</view>

		<view class="pay-price">
			<view class="text" style="margin-right: 20rpx;">
				实付款
			</view>
			<view class="price">
				￥{{ order.pay.price }}
			</view>
		</view>
		<view class="btn-container">
			<view class="more">
				<view v-if="order.isMore" @tap.stop="more(order)">更多</view>
				<view v-if="order.isOpen" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					<view class="dropdown-item" @tap.stop="applyForInvoicing(order)">
						申请开票
					</view>
				</view>
			</view>
			<view class="btn">
				<slot name="btn"></slot>
				<!-- <button>查看物流</button>
        <button>评价</button>
        <button>查看物流</button>
        <button>查看物流</button> -->
			</view>
		</view>
		
		<!-- 删除订单确认弹窗 -->
		<view class="cu-modal couponModal" :class="modalName == '确认删除' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog bg-bgcolor" @tap.stop="">
				<view class="wanl-modal">
					<view class="head padding-bj" style="background: #fc8b00;">
						<view class="content">
							<view class="text-white">提示</view>
						</view>
						<view class="close wlIcon-31guanbi text-white" @tap="hideModal"></view>
					</view>
					<scroll-view class="model-box text-left" scroll-y="true">
						<view class="mb10">是否删除？删除后订单资料无法恢复</view>
					</scroll-view>
					<view class="foot padding-lr-bj">
						<view class="flex w100P">
							<view class="flex-1 ml10 mr10">
								<button class="cu-btn w100P round text-bold complete" @tap="hideModal">取消</button>
							</view>
							<view class="flex-1 ml10 mr10">
								<button class="cu-btn w100P round text-bold complete text-white"
									style="background-color:#fd8c00;" @tap="deleteOrder">确认删除</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['deleteOrder', 'action', 'toDetail', 'onShop', 'changeOrder'],
		props: {
			isMore: {
				type: Boolean,
				default: true
			},
			index: {
				type: Number,
				default: 0
			},
			order: {
				type: Object,
				default: {
					order_no: '',
					stateTip: '',
					stateTipColor: ''
				}
			},
			showUseBtn: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				btns: [{
						name: '联系商家',
						state: 1,
						type: ''
					},
					{
						name: '修改地址',
						state: 1,
						type: ''
					},
					{
						name: '查看预约',
						state: 1,
						type: ''
					},
					{
						name: '立即使用',
						state: 1,
						type: ''
					},
					{
						name: '评价',
						state: 1,
						type: ''
					}
				],
				countDown: null, //订单倒计时
				cancel: false,
				modalName: null,
				cur_order: null,
				currentRow: null,
			}
		},
		mounted() {
			this.countDown = setInterval(()=>{
				const now = Math.round(new Date().getTime()/1000);
				let create = this.order.createtime;
				if(now - create == 900){
					this.cancel = true;
					clearInterval(this.countDown);
					console.log('订单已自动取消')
				}
			},1000)
		},
		computed:{
			orderCancel(){
				const now = Math.round(new Date().getTime()/1000);
				let create = this.order.createtime;
				let count = now - create;
				/* console.log('now',now)
				console.log('create',create)
				console.log('count',now - create) */
				return now - create;
			},
			// 处理发货时间显示
			pre_time(){
				return (pre)=>{
					// console.log('pre',pre)
					// let date = new Date('2024-12-26 15:35:02'); //测试
					let date = new Date(pre);
					let stamp = Date.parse(date) / 1000;
					let stamp_format = this.$wanlshop.timeFormat(stamp, 'yy-mm-dd').split('-');
					// console.log('发货时间',stamp_format)
					
					let date_now = new Date();
					let stamp_now = Date.parse(date_now) / 1000;
					let stamp_now_format = this.$wanlshop.timeFormat(stamp_now, 'yy-mm-dd').split('-');
					// console.log('今天时间',stamp_now_format)
					
					let stamp_text = '';
					// 确保是当前年/月
					if(stamp_format[0] == stamp_now_format[0] && stamp_format[1] == stamp_now_format[1]){
						let gap = stamp_format[2] - stamp_now_format[2];
						if(gap == 0) stamp_text = '今天';
						if(gap == 1) stamp_text = '明天';
						if(gap == 2) stamp_text = '后天';
					}
					let day = this.$wanlshop.timeFormat(stamp, "mm月dd日")
					let time = this.$wanlshop.timeFormat(stamp, "hh:MM")
					// console.log(`${stamp_text}(${day})${time}`)
					
					if(stamp_text) return `${stamp_text}(${day})${time}`
					else return this.$wanlshop.timeFormat(stamp, "yy年mm月dd日 hh:MM")
				}
			}
		},
		methods: {
			/** 确认收货弹窗 */
			showModal(name, order) {
				this.cur_order = order
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					this.modalName = null;
				}
			},
			deleteOrder() {
				this.$emit('deleteOrder', this.cur_order, this.index)
				this.hideModal();
			},
			onShop() {
				this.$emit('onShop', this.order)
			},
			toDetail() {
				this.$emit('toDetail', this.order)
			},
			action() {
				this.$emit('action')
			},
			// 立即使用
			use(order) {
				uni.navigateTo({
					url: `/pages/user/order/orderCode?id=${order.id}`
				})
			},
			// 更多
			more(order) {
				this.$emit('changeOrder', order.id, !order.isOpen);
			},
			toMask(order) {
				this.$emit('changeOrder', order, false);
			},
			// 申请开票
			applyForInvoicing(order) {
				this.toMask(order);
				let info = {
					order_no: order.order_no,
					order_id: order.id,
					shop_id: order.shop_id,
					price: order.pay.price,
				};
				uni.setStorage({
					key: "order_info",
					data: JSON.stringify(info),
					success: function() {
						console.log("存储成功");
					},
				});
				this.$wanlshop.to(`/pages/invoice/list`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-card {
		width: 100%;
		margin-bottom: 12px;
		padding: 14px 15px 10px 15px;
		border-radius: 12px;
		opacity: 1;
		background: #ffffff;
		/* 卡片阴影 */
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);

		.tabs-use {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.mask {
			position: fixed;
			top: 44rpx;
			left: 0;
			height: 0;
			width: 100%;
			height: 100vh;
			z-index: 9;
			background-color: transparent;
		}

		.dropdown-menu::before {
			content: '';
			position: absolute;
			top: -15rpx;
			left: 30rpx;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 20rpx solid transparent;
			border-right: 20rpx solid transparent;
			border-bottom: 20rpx solid #ffffff;
			/* 三角形颜色 */
			filter: drop-shadow(2rpx -4rpx 8rpx rgba(0, 0, 0, 0.1));
		}

		.dropdown-menu {
			position: absolute;
			z-index: 10;
			top: 56rpx;
			left: -10rpx;
			width: 160rpx;
			background-color: #ffffff;
			box-shadow: 4rpx 4rpx 4rpx 4rpx rgba(0, 0, 0, 0.1);

			.dropdown-item {
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ffffff;
				font-size: 26rpx;
			}

			.dropdown-item:last-child {
				border: none;
			}
		}

		.use {
			// width: 160rpx;
			padding: 0 26rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 60rpx;
			font-size: 26rpx;
			border: 1rpx solid $border-color-base;
		}

		.btn-container {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.more {
				font-family: PingFang SC;
				font-size: 12px;
				font-weight: normal;
				line-height: normal;
				text-align: center;
				letter-spacing: 0em;
				font-variation-settings: "opsz" auto;
				/* 字体标准黑色 */
				color: #3D3D3D;
				position: relative;
			}
		}

		.header {
			padding-bottom: 10px;
			border-bottom: 0.5px solid #f3f3f3;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.num {
				font-family: PingFang SC;
				font-size: 11px;
				font-weight: normal;
				line-height: normal;
				text-align: center;
				letter-spacing: 0px;
				font-variation-settings: "opsz" auto;
				/* 字体标准黑色 */
				color: #3d3d3d;
			}

			.state-del {
				display: flex;
				align-items: center;

				.state {
					font-family: PingFang SC;
					font-size: 12px;
					font-weight: normal;
					line-height: normal;
					text-align: right;
					letter-spacing: 0em;
					font-variation-settings: "opsz" auto;
					color: #ff4646;
				}

				text {
					margin-left: 5px;
				}
			}

		}

		.img-info {
			display: flex;
			align-items: center;
			margin: 15px 0;

			.img {
				width: 78px;
				height: 78px;
				margin-right: 5px;
				border-radius: 4px;
				overflow: hidden;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				flex: 1;
				min-height: 156rpx;

				.title-pice,
				.dis-unit,
				.tags {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.tags {
					width: 315rpx;
					word-break: keep-all;
				}

				.title-pice {
					.title {
						font-family: PingFang SC;
						font-size: 14px;
						font-weight: normal;
						line-height: normal;
						letter-spacing: 0em;
						font-variation-settings: "opsz" auto;
						color: #3d3d3d;
					}

					.pice {
						font-family: PingFang SC;
						font-size: 15px;
						font-weight: normal;
						line-height: normal;
						letter-spacing: 0em;
						font-variation-settings: "opsz" auto;
						/* 字体标准黑色 */
						// color: #3d3d3d;
					}
				}

				.dis-unit {
					margin: 8px 0 10px 0;

					.dis {
						font-family: PingFang SC;
						font-size: 12px;
						font-weight: normal;
						line-height: normal;
						letter-spacing: 0em;
						font-variation-settings: "opsz" auto;
						/* 次要信息 */
						color: #BCBCBC;
					}

					.unit {
						font-family: PingFang SC;
						font-size: 12px;
						font-weight: normal;
						line-height: normal;
						letter-spacing: 0em;
						font-variation-settings: "opsz" auto;
						color: #6A6A6A;
					}
				}

				.tags {
					justify-content: flex-start;

					.tag {
						border-radius: 2px;
						opacity: 1;
						box-sizing: border-box;
						border: 0.6px solid #fd8c00;
						font-family: PingFang SC;
						font-size: 10px;
						font-weight: normal;
						line-height: normal;
						font-variation-settings: "opsz" auto;
						color: #fd8c00;
						padding: 0 4px;
						margin-right: 4px;

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}

		.product-serve {}

		.tips {
			width: 100%;
			background: #f7f7f7;
			padding: 14rpx;
			border-radius: 12rpx;
			padding-left: 42rpx;
			display: flex;
			align-items: center;
			
			.dfh_img{
				width: 44rpx;
				height: 44rpx;
				margin-right: 10rpx;
			}
			
			.info{
				font-size: 26rpx;
				
				.title{
					color: #3D3D3D;
					margin-right: 20rpx;
				}
			}
		}

		.pay-price {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin: 12px 0;

			.text {
				font-family: PingFang SC;
				font-size: 12px;
				font-weight: normal;
				line-height: normal;
				letter-spacing: 0em;
				font-variation-settings: "opsz" auto;
				color: #3D3D3D;
			}

			.price {
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: normal;
				letter-spacing: 0em;
				font-variation-settings: "opsz" auto;
				color: #3D3D3D;
			}
		}
	}

	.uni-.uni-countdown__number {
		color: #FF4646 !important;
	}
</style>